<template>
  <div>
    <van-nav-bar title="分类" left-arrow />
    <van-tabs>
      <van-tab v-for="item in list" :key="item.id" :title="item.name">
        <div
          class="left"
          v-for="item in chu"
          :key="item.id"
          @click="addlist(item.id)"
        >
          <img class="chj" :src="item.list_pic_url" alt="" />
          <span>
            {{ item.name }}
          </span>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      active: 0,
      chu: [],
    };
  },
  methods: {
    add() {
      this.$axios
        .get("http://shop.bufantec.com/bufan/category/categoryNav?id=1005000")
        .then((res) => {
          this.list = res.data.navData;
          this.active = res.data.navData.id;
          console.log(res);
        });
    },
    addlist(id) {
      this.$router.push("/xiang");
    },
    ad() {
      this.$axios
        .get(
          `http://shop.bufantec.com/bufan/goods/goodsList?categoryId=1005000`
        )
        .then((res) => {
          this.chu = res.data.data;
          console.log(res, "111");
        });
    },
  },
  mounted() {
    console.log(this.active);
    this.add();
    this.ad();
  },
};
</script>

<style>
.left {
  display: flex;
}
.chj {
  width: 150px;
  height: 100px;
}
</style>
